<template>
  <div class="third-contrainer">
    <div class="line"></div>
    <div class="block">
      <el-timeline>
        <template v-for="item in list">
          <el-timeline-item :timestamp="item.createTime" placement="top" :key="item.id">
            <el-card>
              <div class="history-item">
                <div class="history-post">
                  <img
                    :src="item.videoEntity.videoCover"
                    alt=""
                    style="width: 60%"
                  />
                </div>
                <div class="content">
                  <span>{{ item.videoEntity.videoName }}</span>
                </div>
                <div class="content">
                  <span style="font-size:14px">观看至{{ time(item.videoEntity.videoId) }}</span>
                </div>
                <div class="tool">
                  <span title="删除记录">
                    <el-button
                      @click="deleteHistory(item.id)"
                      type="text"
                      size="normal"
                      style="color: red; font-size: 15px"
                    >
                      <i class="el-icon-delete"></i>
                      删除
                    </el-button>
                  </span>
                  <span title="继续观看">
                    <el-button
                      @click="
                        play(
                          item.videoEntity.videoSign,
                          item.videoEntity.videoName,
                          item.videoEntity.videoId
                        )
                      "
                      type="text"
                      size="normal"
                      style="
                        text-decoration: underline;
                        color: green;
                        font-size: 15px;
                      "
                    >
                      <i class="el-icon-video-play"></i>
                      继续观看
                    </el-button>
                  </span>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </template>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import { getHistory } from "../../api/user";
import { deleteHistory } from "../../api/video";
export default {
  name: "Third",
  data() {
    return {
      list: [],
    };
  },
  methods: {
    time(v_id) {
      let t = localStorage.getItem(v_id);
      var secondTime = parseInt(t); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取佘，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取佘的分，获取分钟除以60取佘的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var result = "" + parseInt(secondTime) + "秒";

      if (minuteTime > 0) {
        result = "" + parseInt(minuteTime) + "分" + result;
      }
      if (hourTime > 0) {
        result = "" + parseInt(hourTime) + "小时" + result;
      }
      return result;
    },
    deleteHistory(i) {
      this.$confirm("此操作将永久删除记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteHistory([parseInt(i)]).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              getHistory().then((res) => {
                this.list = res.data.list;
                console.log(this.list);
              });
            } else {
              this.message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    play(sign, name, id) {
      this.$router.push({
        path: "play",
        query: {
          sign,
          name,
          id,
        },
      });
    },
  },
  created() {
    getHistory().then((res) => {
      this.list = res.data.list;
      console.log(this.list);
    });
  },
};
</script>

<style lang="less" scoped>
.history-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    span {
      font-size: 20px;
      margin: 15px 0;
    }
  }
  .tool {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}
</style>